<template>
  <s-layout
    title="选择性别"
    navbar="inner"
    color="#000000"
    :leftIcon="''"
    :bgStyle="pageStyle.background"
    :showLeftHome="false"
  >
    <scroll-view scroll-y
                 :style="{
                  height: `calc(100vh - ${scrollView_height}px)`
                 }"
    >
      <view class="selectGender flex flex-column align-center">
        <view class="tips mt_131 z_1">
          <text class="tips_overText">您的性别</text>
        </view>
        <view class="tips mt_18 z_1">
          <text class="tips_littleText">性别选择完成后&nbsp;将不可更改</text>
        </view>
        <view class="selectGender_content flex align-center justify-around z_1">
          <view class="selectGender_content_list flex flex-column align-center mt_73"
                v-for="(item,index) in genderList.list" :key="index"
                @click="selectList(item.sex)">
            <s-avatar :isOrder="true" :width="160" :height="160" :border-width="8" :src="item.imageSrc"
                      :border-color="userInfo.checkIndex == item.sex ? '#FF4206':'#FFFFFF'"></s-avatar>
            <view class="character">
              <text class="character_text" :style="{
            color: userInfo.checkIndex == item.sex ? '#FF4206':'#4B4B4B',
          }">{{ item.name }}
              </text>
            </view>
          </view>
        </view>
        <view class="selectGender_btn flex align-center justify-center z-1 mt_159" @click.stop="goToPath">
          <text class="selectGender_btn_text z_1 wh">下一步</text>
        </view>
      </view>
    </scroll-view>
  </s-layout>
</template>

<script setup>
  import sAvatar from '@/sheep/components/s-avatar/s-avatar.vue';
  import { computed, onMounted, reactive } from 'vue';
  import sheep from '@/sheep';

  const pageStyle = reactive({
    background: { color: '#F5F5F5', src: '' },
  });
  const genderList = reactive({
    list: [{ sex: 1 }, { sex: 2 }],
  });

  const userInfo = reactive({
    checkIndex: -1,
  });

  const scrollView_height = computed(() => {
    let height = 0;
    height = Number(sheep.$platform.device.statusBarHeight) + Number(sheep.$store('system_info').tabbar_height) + 44;
    return height;
  });

  onMounted(async () => {
    const { data } = await sheep.$api.family.getDefaultAvatar({ type: 3 });
    console.log(data);
    data.forEach(item => {
      if (item.sex == 1) {
        genderList.list[0].imageSrc = sheep.$store('AI').nc_image + item.avatar;
      }
      if (item.sex == 2) {
        genderList.list[1].imageSrc = sheep.$store('AI').nc_image + item.avatar;
      }
    });
  });

  function goToPath() {
    if (userInfo.checkIndex == -1) {
      uni.showToast({ title: '请点击头像选择您的性别', icon: 'none' });
      return;
    }
    sheep.$router.go('/pages/userData/basicInformation', { sex: userInfo.checkIndex });
  }

  function selectList(sex) {
    userInfo.checkIndex = sex;
  }
</script>


<style scoped lang="scss">
  .selectGender {
    width: 750rpx;
    overflow: hidden;
    background: #F5F5F5;

    .bag {
      width: 750rpx;
      position: absolute;
      top: 0;
      left: 0;

      .bag_image {
        width: 750rpx;
      }
    }

    .tips {
      width: 660rpx;
      z-index: 1;

      &_overText {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #000000;
      }

      &_littleText {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #4B4B4B;
      }
    }

    .selectGender_content {
      width: 750rpx;
      z-index: 1;

      .selectGender_content_list {
        .character {
          &_text {
            font-weight: 500;
            font-size: 38rpx;
            color: #FF4206;
          }
        }
      }
    }

    .selectGender_btn {
      width: 362rpx;
      height: 100rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      z-index: 1;

      .selectGender_btn_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
